Hey @Eng-Elias! Sorry for slow reply. This looks dope, and I like the idea of supporting this. I hope we can move it into the viewer though. It's unclear from the repo (there's no CONTRIBUTING guide like we should probably have), but your change was made to the demo application and not the viewer itself.

I think you could make a somewhat similar change to the EventHandler here:

Maybe with onWheel in the eventRouter at the bottom?

How to percolate that change is unfortunately tricky. You'll need to:

1. Add zoom to SeqVizState:

   seqviz/src/SeqViz.tsx

   Line 172 in ea558f2

   export interface SeqVizState {

2. Copy zoom from props into state in the constructor:

   seqviz/src/SeqViz.tsx

   Line 217 in ea558f2

   this.state = {

3. Create something like an updateZoom handler on SeqViz to prop drill down into EventHandler.tsx
4. Pass zoom from state rather than props in the SeqViz render:

   seqviz/src/SeqViz.tsx

   Line 420 in ea558f2

   const { highlightedRegions, highlights, primers, showComplement, showIndex, style, zoom } = this.props;

5. Add the wheel event handler here to EventHandler which then percolates that change (depending on the viewer) up into SeqViz to change its state
6. (safety in case users change the zoom prop outside SeqViz): Check for whether the zoom prop changes in which case we override the one in state with the one from props:

   seqviz/src/SeqViz.tsx

   Line 281 in ea558f2

   { accession = "", annotations, enzymes, enzymesCustom, file, search }: SeqVizProps,

Hi @jjti , sorry for the delay to respond but I moved to Dubai this month and I was very busy.
Thank you for your suggestion, I thought of embedding this feature in the viewer directly but I thought that will not be accepted.
However I will try to work on your suggestion in the next few days and push the changes.

Hi @jjti , I embedded mouse wheel zoom into viewer instead of demo, please review the changes and let me know if you have any note.